$width-all:1280px;
$width:1010px;

@mixin middle($top:0px, $bottom:0px) {
  margin: $top auto $bottom;
}

@mixin flew($row:row) {
  display: flex;
  flex-direction: $row;
}


.pic {
  height: 253px;
  width: $width-all;
  @include middle();
}

section {
  width: $width-all;
  height: 4760px;
  @include middle();
  font-size: 0;

  >p {
    padding-left: 165px;
    line-height: 29px;
    font-size: 12px;
  }

  >.top {
    margin-left: 156px;
    width: 1063px;
    height: 412px;
    border-bottom: 1px solid #b4b4b4;
    @include flew();
    justify-content: space-between;
    align-items: flex-end;

    >.top-left {
      width: 484px;
      height: 100%;
      border-right: 1px solid #b4b4b4;

      >.left-top {
        height: 322px;
        width: 100%;
        @include flew();
        align-items: flex-end;
        // justify-content: center;

        >img {
          margin: {
            left: 152px;
            bottom: 14px;
          }
        }

        &>img:last-child {
          margin-left: 101px;
        }
      }

      >.left-bottom {
        height: 90px;
        @include flew();

        >.left-bottom1 {
          width: 20%;
          height: 89px;

          border: {
            top: 1px solid #b4b4b4;
            left: 1px solid #b4b4b4;
          }

          @include flew();
          justify-content: center;
          align-items: center;
        }
      }
    }

    >.top-right {
      width: 517px;
      height: 355px;

      >p {
        font-size: 25px;
        font-weight: bold;
        line-height: 46px;
      }

      >p:first-of-type {
        color: #5793db;
      }

      >p:last-of-type {
        padding-top: 5px;
        font-size: 18px;
        font-weight: 400;
        line-height: 36px;
      }

      >ol {
        >li {
          font-size: 12px;
          line-height: 21px;
        }
      }

      >button {
        margin: {
          top: 30px;
          left: 5px;
          right: 52px;
        }
        outline: none;
        width: 170px;
        height: 50px;
        border: none;
        border-radius: 10px;
        color: white;
        font-size: 20px;
        background-color: #468bd9;
      }

      >button:last-of-type {
        margin: 0;
        background-color: #b5b5b5;
      }
    }
  }

  >.middle {
    margin: {
      top: 41px;
      bottom: 72px;
    }

    height: 100px;
    width: 100%;
    background-color: #b5b5b5;
    @include flew();
    font-size: 20px;

    >.text1 {
      margin: {
        left: 184px;
        right: 58px;
      }

      width: 94px;
      height: 93px;
      background-color: #fff;
      border-bottom: 7px solid #3c9cd3;
      color: #468bd9;
      @include flew();
      justify-content: center;
      align-items: center;
    }

    >.text2 {
      @extend .text1;
      margin-left: 0;
      background-color: #b5b5b5;
      color: white;
      border-bottom: 7px solid #b5b5b5;
    }
  }

  >.detail1 {
    @include middle();
    margin-bottom: 21px;
    width: 618px;
    height: 507px;

    >.detail1-top {
      height: 87px;
      @include flew(column);
      justify-content: space-between;
      align-items: center;

      >p {
        font-size: 12px;
        color: #a4a4a4;
      }

      >p:first-of-type {
        font-size: 33px;
        color: #0b5ae4;
      }
    }

    >.detail1-bottom {
      margin-top: 56px;
      height: 363px;
      @include flew();
      align-items: center;
    }
  }

  >.detail2 {
    @extend .detail1;
    width: 747px;
    height: 724px;

    >.detail2-top {
      @extend .detail1-top;
      height: 116px;

      >ul {
        font-size: 12px;
        color: #a4a4a4;
        line-height: 18px;
        text-align: center;
      }

    }

    >.detail2-bottom {
      margin-top: 20px;
    }
  }

  >.detail3 {
    @extend .detail2;
    height: 584px;
    width: 737px;
  }

  >.detail4 {
    @extend .detail2;
    height: 649px;
    width: 759px;
  }

  >.middle1 {
    @extend .middle;

    >.text2 {
      @extend .text1;
      margin-left: 188px;
    }
  }

  >.table {
    @include middle(32px, 92px);
    height: 813px;
    width: 688px;
    @include flew();
    align-items: center;
    justify-content: space-between;

    >.table-left {
      width: 119px;
      height: 489px;
      @include flew(column);
      justify-content: space-between;
    }

    >.table-right {
      width: 518px;
      height: 816px;
      font-size: 12px;

      >table{

        >thead{
          >tr{
            >th{
              border: 2px solid #d5d5d5;
              width: 84px;
              line-height: 22px;
              text-align: center;
            }

            >th:nth-of-type(2){
              width: 105px;
              text-align: left;
              padding-left: 25px;
              box-sizing: border-box;
            }

            >th:last-of-type{
              @extend th:nth-of-type(2);
              width: 323px;
              padding-left: 9px;
            }
          }
        }

        >tbody{
          >tr{
            >td{
              border: 2px solid #d5d5d5;
              line-height: 22px;
              text-align: left;
              padding-left: 16px;
              box-sizing: border-box;
            }

            >td:last-of-type{
              padding-left: 14px;
            }

            >.center{
              text-align: center;
              padding: 0;
            }
          }
        }
        
      }



    }
  }

  >.more {
    @include middle();
    width: 926px;
    height: 176px;
    @include flew();
    justify-content: space-between;
  }
}